<template>
  <div class="map-container">
    <component
      class="bigMap"
      @click.native = mapClick()
      :is="currentItem.componentName"
      :color="currentItem.color"
      :styleArr = "[600,600]"
      v-if="currentItem.componentName"
    > <span slot="tip" class="tip">{{currentItem.componentName}}</span></component>
    <div v-if="!currentItem.componentName" class="wrap-map">
      <component
        v-for="(item,i) in mapArr"
        class="icon"
        :styleArr="item.styleArr"
        :color="item.color"
        :class="item.class"
        @click.native="mapClick(item)"
        :key="i"
        :is="item.componentName"
      >
        <span slot="tip" class="tip">{{item.componentName}}</span>
      </component>
    </div>

    <!-- <guangxi class="guangxi"></guangxi>
    <guangdong class="guangdong"></guangdong>
    <hunan class="hunan"></hunan>
    <guizhou class="guizhou"></guizhou>
    <jiangxi class="jiangxi"></jiangxi>
    <fujian class="fujian"></fujian>-->
  </div>
</template>
<script>
import Fs from "./component/fs.vue";
import guangxi from "./component/guangxi.vue";
import guangdong from "./component/guangdong.vue";
import guizhou from "./component/guizhou.vue";
import hunan from "./component/hunan.vue";
import jiangxi from "./component/jiangxi.vue";
import fujian from "./component/fujian.vue";
import "./path.scss";
export default {
  name: "svgC",
  data() {
    return {
      currentItem: {},
      mapArr: [
        {
          componentName: "guangxi",
          class: "guangxi",
          color: "red"
        },
        {
          componentName: "guangdong",
          class: "guangdong",
          color: "blue"
        },
        {
          componentName: "guizhou",
          class: "guizhou",
          color: "purple"
        },
        {
          componentName: "hunan",
          class: "hunan",
          color: "#f60"
        },
        {
          componentName: "jiangxi",
          class: "jiangxi",
          color: "green",
          styleArr: [200, 200]
        },
        {
          componentName: "fujian",
          class: "fujian",
          color: "#e8e8e8"
        }
      ]
    };
  },
  mounted() {
    this.getComponents();
  },
  components: {
    //Fs,
    guangxi,
    guangdong,
    hunan,
    guizhou,
    jiangxi,
    fujian
  },
  methods: {
    getComponents() {
      const requireComponent = require.context("./component", true, /\.vue$/);
      requireComponent.keys().forEach(fileName => {
        const config = requireComponent(fileName);
        //svgC.component(fileName, config.default || config); // 动态注册该目录下的所有.vue文件
      });
    },
    mapClick(item={}) {
      this.currentItem = { ...item };
    }
  }
};
</script>

<style lang="scss" scoped>
.map-container {
  position: relative;
  margin: 0 auto;
  width: 800px;
  height: 800px;
  .bigMap{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate3d(-50%,-50%,0);
  }
  .icon {
    overflow: hidden;
    position: absolute;
    cursor: pointer;
  }
  .wrap-map {
    display: inline-block;
  }
  & > div {
    .tip {
      position: absolute;
      top: 50%;
      left: 50%;
    }
  }
  .guizhou {
    left: 0;
    top: 0;
  }
  .guangxi {
    left: 38px;
    top: 128px;
  }
  .hunan {
    top: 2px;
    left: 193px;
  }
  .guangdong {
    top: 168px;
    left: 228px;
  }
  .fujian {
    top: 38px;
    left: 415px;
  }
  .jiangxi {
    top: 6px;
    left: 333px;
  }
}
</style>

